import React from 'react';
import { Layout as AntLayout, Menu, Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../hooks/useAuth';
import styled from '@emotion/styled';

const { Header, Content } = AntLayout;

const StyledLayout = styled(AntLayout)`
  min-height: 100vh;
`;

const StyledHeader = styled(Header)`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
`;

const Logo = styled.div`
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
`;

const StyledContent = styled(Content)`
  padding: 24px;
  background: #f0f2f5;
`;

const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const navigate = useNavigate();
  const { logout } = useAuth();

  const handleLogout = () => {
    logout();
    navigate('/login');
  };

  return (
    <StyledLayout>
      <StyledHeader>
        <Logo>知识平台</Logo>
        <div>
          <Menu mode="horizontal" style={{ display: 'inline-block' }}>
            <Menu.Item key="home" onClick={() => navigate('/')}>
              首页
            </Menu.Item>
            <Menu.Item key="articles" onClick={() => navigate('/articles')}>
              文章
            </Menu.Item>
          </Menu>
          <Button type="link" onClick={handleLogout} style={{ marginLeft: 16 }}>
            退出登录
          </Button>
        </div>
      </StyledHeader>
      <StyledContent>{children}</StyledContent>
    </StyledLayout>
  );
};

export default Layout; 